<template>
  <!-- 登录 -->
  <van-form @submit="onLogon" style="width: 80%; height: 200px; margin-top: 100px; margin-left: 30px">
    <span style="font-size: large; font-weight: bold; display: block; height: 25px">登录</span>
    <span style="font-style: italic; color: burlywood">仓库管理系统</span><br /><br />
    <van-tabs  animated title-active-color="#144a9e"
    color="#144a9e" >
      <van-tab title="密码登录"><br />
        <van-field v-model="LoginForm.username" name="用户名" placeholder="用户名" left-icon="user"
          style="border: 1px solid #cccccc; border-radius: 15px; line-height: 100%" autocomplete="false"
          label-width="30px" inset  :rules="[{ required: true, message: '请填写用户名' }]" /><br />
        <van-field v-model="LoginForm.password" type="password" name="密码" placeholder="密码" left-icon="lock"
          style="border: 1px solid #cccccc; border-radius: 15px; line-height: 100%" autocomplete="false" inset :rules="[{ required: true, message: '请填写密码' }]"/>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-tab>
      <van-tab title="扫码登录">
        <div style="margin-top: 20px">
      <van-cell-group>
        <van-field v-model="code_input" ref="code_input" placeholder="请扫描条码" left-icon="scan"  />
      </van-cell-group>
    </div>
      </van-tab>
    </van-tabs>
  </van-form>
</template>
<script>
export default {
  data() {
    return {
      LoginForm: {},
      code_input:''
    };
  },
  methods: {
    // 登录
    onLogon() {
      this.logon();
    },
    async logon() {
      let Order = {
        username: this.LoginForm.username,
        password: this.LoginForm.password,
      };
      const { data: res } = await this.$http.post("/login", Order);
      if (res.code == "200") {
        localStorage.setItem("token", res.data);
        localStorage.setItem("username", this.LoginForm.username);
        localStorage.setItem("plant", res.plant);
        localStorage.setItem("firstName", this.LoginForm.firstName);
        localStorage.setItem("erpId", res.erpId);
        this.$router.push("/HomePage");
        this.$message({
          message: "登录成功！",
          type: "success",
        });
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style>
.van-field {
  border-radius: 10px;
  text-align: left;
}
</style>